import React, {useEffect, useState} from 'react';
import {useParams} from "react-router-dom"
import axios from '../../utils';
import {Detail as DetailArticle} from "../../utils";
import "./detail.styl"

interface IDParams {
  id: string
}

interface ArticleDetail {
  title: string,
  content: string,
}

export const Detail: React.FC = () => {
  const {id} = useParams<IDParams>()
  const [article, setArticle] = useState<ArticleDetail>({title: "loading", content: ""});
  useEffect(() => {
    axios.get<{ data: ArticleDetail }>(DetailArticle.GET + `?id=${id}`).then(res => {
      setArticle(res.data.data)
    })
  }, [id])
  return (
    <div className="detailWrapper">
      <h2 className="title">{article.title}</h2>
      <div className="content" dangerouslySetInnerHTML={{__html: article.content}}/>
    </div>
  );
};
